<template>
  <div>
    <el-button type="primary" size="mini" @click="dialogFormVisible = true"
      >新增</el-button
    >
    <el-button type="warning" size="mini" @click="">导出</el-button>
    <el-button type="success" size="mini" @click="">打印</el-button>
  </div>
  <div>
    <el-table :data="warehouseData" style="width: 100%">
      <el-table-column prop="warehouseName" label="仓库代码" />
      <el-table-column prop="repositoryCode" label="仓库名称" />
      <el-table-column prop="materialTypeName" label="仓库料品" />
      <el-table-column prop="inBoundTypeName" label="入库类型" />
      <el-table-column prop="outBoundTypeName" label="出库类型" />
      <el-table-column prop="periodOfStorage" label="创库期间">
        <template #default="scope">
          <text v-if="scope.row.periodOfStorage == 0"> 自然月 </text>
          <text v-else> 固定日 </text>
          <text></text>
        </template>
      </el-table-column>
      <el-table-column prop="startCargoSpace" label="启动货位" />
      <el-table-column prop="updatedTime" label="更新时间">
        <template v-slot="scope">
          <text v-if="scope.row.updatedTime == '1900-01-01T00:00:00'"></text>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" size="mini" @click="updWarehouse(scope.row)"
            >修改</el-button
          >
          <el-button type="danger" size="mini" @click="delWarehouse(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
  <el-dialog v-model="dialogFormVisible" title="Shipping address" width="500">
    <el-form :model="form">
      <el-form-item label="仓库代码" :label-width="formLabelWidth">
        <el-input v-model="form.repositoryCode" autocomplete="off" />
      </el-form-item>
      <el-form-item label="仓库名称" :label-width="formLabelWidth">
        <el-input v-model="form.warehouseName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="仓库料品" :label-width="formLabelWidth">
        <el-select
          v-model="form.warehouseMaterialId"
          multiple
          placeholder="请选择"
          style="width: 240px"
          @change="warehouseHandClick"
        >
          <el-option
            v-for="item in warehouseMaterialData"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="入库类型" :label-width="formLabelWidth">
        <el-select
          v-model="form.inBoundTypeId"
          multiple
          placeholder="请选择"
          style="width: 240px"
          @change="inboundTypeHandClick"
        >
          <el-option
            v-for="item in inboundTypeData"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            
          />
        </el-select>
      </el-form-item>
      <el-form-item label="出库类型" :label-width="formLabelWidth">
        <el-select
          v-model="form.outBoundTypeId"
          multiple
          placeholder="请选择"
          style="width: 240px"
          @change="outboundTypeHandClick"
        >
          <el-option
            v-for="item in outBoundTypeData"
            :key="item.value"
            :label="item.label"
            :value="item.value"

          />
        </el-select>
      </el-form-item>
      <el-form-item label="到货类型" :label-width="formLabelWidth">
        <el-select
          v-model="form.arrivalTypeId"
          multiple
          placeholder="请选择"
          style="width: 240px"
          @change="arrivalTypeHandClick"
        >
          <el-option
            v-for="item in arrivalTypeData"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="仓库期间" :label-width="formLabelWidth">
        <el-radio-group v-model="form.periodOfStorage">
          <el-radio :value="false">自然月</el-radio>
          <el-radio :value="true">固定日</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="开始日期" :label-width="formLabelWidth">
        <el-date-picker
          v-model="form.startDate"
          type="date"
          placeholder="请选择"
          style="width: 100%"
        />
      </el-form-item>
      <el-form-item label="启动货位" :label-width="formLabelWidth">
        <el-radio-group v-model="form.startCargoSpace">
          <el-radio :value="false">是</el-radio>
          <el-radio :value="true">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="表单配置" :label-width="formLabelWidth">
        <el-input v-model="form.formConfiguration" autocomplete="off" />
      </el-form-item>

      <el-form-item label="仓管员" :label-width="formLabelWidth">
        <el-select v-model="form.warehouseKeeperId" placeholder="请选择">
          <el-option
            v-for="item in employeeData"
            :key="item.employeeId"
            :label="item.employeeName"
            :value="item.employeeId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="操作员" :label-width="formLabelWidth">
        <el-select v-model="form.operatorId" placeholder="请选择">
          <el-option
            v-for="item in employeeData"
            :key="item.employeeId"
            :label="item.employeeName"
            :value="item.employeeId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="操作员" :label-width="formLabelWidth">
        <el-button type="primary" size="mini" @click="addWarehouse()"
          >修改</el-button
        >
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue';
import axios from 'axios';
import { ElMessage } from 'element-plus';
const dialogTableVisible = ref(false);
const dialogFormVisible = ref(false);
const formLabelWidth = '140px';
const apiurls = import.meta.env.VITE_APP_API_URL_BasicInformationCommon;//5176
const bpiurls = import.meta.env.VITE_APP_API_URL_BasicInformationWrite;//5013
const cpiurls = import.meta.env.VITE_APP_API_URL_RBACCommon;//5214
const dpiurls = import.meta.env.VITE_APP_API_URL_RBACWrite;//5268
const epiurls = import.meta.env.VITE_APP_API_URL_SalesManagementCommon;//5227
const fpiurls = import.meta.env.VITE_APP_API_URL_SalesManagementWrite;//5020

onMounted(() => {
  getWarehouseList();
  warehouseMaterialList();
  inboundTypeList();
  outBoundTypeList();
  arrivalTypeList();
  employeeList();
});
//仓库料品查询
let materialTreeIds:any =[];
const warehouseHandClick=(val:any)=>{
   console.log(val);
   materialTreeIds=val.toString()
   console.log(materialTreeIds);
   
}
const warehouseMaterialData: any = ref([]);
const warehouseMaterialList = () => {
  axios
    .get(apiurls+'/api/Materials/GetmaterialTree')
    .then((res) => {
      console.log(res.data.data);
      warehouseMaterialData.value = res.data.data;
    })
    .catch((err) => {
      console.log(err);
    });
};
//入库类型查询
let inboundTypeIdsArr:any=[];
const inboundTypeHandClick=(val:any)=>{
  inboundTypeIdsArr=val.toString()
  console.log(inboundTypeIdsArr);
}
const inboundTypeData: any = ref([]);
const inboundTypeList = () => {
  axios
    .get(apiurls+'/api/WarehouseRead/InboundTypeQuery')
    .then((res) => {
      console.log(res.data);
      inboundTypeData.value = res.data.data;
    })
    .catch((err) => {
      console.log(err);
    });
};
//出库类型查询
let outboundTypeIdsArr:any=[]
const outboundTypeHandClick=(val:any)=>{
  outboundTypeIdsArr=val.toString()
}
const outBoundTypeData: any = ref([]);
const outBoundTypeList = () => {
  axios
    .get(apiurls+'/api/WarehouseRead/OutboundTypeQuery')
    .then((res) => {
      console.log(res.data);
      outBoundTypeData.value = res.data.data;
    })
    .catch((err) => {
      console.log(err);
    });
};
//到货类型查询
let arrivalTypeIdsArr:any=[]
const arrivalTypeHandClick=(val:any)=>{
  arrivalTypeIdsArr=val.toString()
  console.log(arrivalTypeIdsArr);
  
}

const arrivalTypeData: any = ref([]);
const arrivalTypeList = () => {
  axios
    .get(apiurls+'/api/WarehouseRead/ArrivalTypeQuery')
    .then((res) => {
      console.log(res.data);
      arrivalTypeData.value = res.data.data;
    })
    .catch((err) => {
      console.log(err);
    });
};
const warehouseData: any = ref([]);
const getWarehouseList = () => {
  axios
    .get(apiurls+'/api/WarehouseRead/WarehouseQuery')
    .then((res) => {
      console.log(res.data);
      warehouseData.value = res.data.data;
    })
    .catch((err) => {
      console.log(err);
    });
};
//修改
const updWarehouse = (warehouseId: any) => {};
//删除
const delWarehouse = (warehouseId: any) => {};
//新增参数
const form: any = reactive({
  warehouseId: 0,
  repositoryCode: '',
  warehouseName: '',
  warehouseMaterialId: '',
  inBoundTypeId: '',
  outBoundTypeId: '',
  arrivalTypeId: '',
  periodOfStorage: true,
  startDate: '',
  startCargoSpace: true,
  formConfiguration: '',
  warehouseKeeperId: 0,
  operatorId: 0
});
//新增
const addWarehouse = () => {
  console.log(inboundTypeIdsArr);
  var data = {
    warehouseId: form.warehouseId,
    repositoryCode: form.repositoryCode,
    warehouseName: form.warehouseName,
    MaterialTypeIds: materialTreeIds,
    inBoundTypeId: inboundTypeIdsArr,
    outBoundTypeId: outboundTypeIdsArr,
    arrivalTypeId: arrivalTypeIdsArr,
    periodOfStorage: form.periodOfStorage,
    startDate: form.startDate,
    startCargoSpace: form.startCargoSpace,
    formConfiguration: form.formConfiguration,
    warehouseKeeperId: form.warehouseKeeperId,
    operatorId: form.operatorId
  };
  axios
    .post(bpiurls+'/api/Warehouse/WarehouseCreate', data)
    .then((res) => {
      if (res.data.code == 0) {
        ElMessage.success('添加成功');
        getWarehouseList();
      } else {
        ElMessage.success('添加失败');
      }
    })
    .catch((err) => {
      console.log(err);
    });
};


//仓管员操作人查询
const employeeData: any = ref([]);
const employeeList = () => {
  axios
    .get(apiurls+'/api/WarehouseRead/EmployeeQuery')
    .then((res) => {
      console.log(res.data);
      employeeData.value = res.data.data;
    })
    .catch((err) => {
      console.log(err);
    });
};
</script>

<style scoped></style>
